<style>
</style>

<template>

  <div class="manage-wrap">
    <div class="operation-panel">
      <Row>
        <Col span="24">
        <Poptip
          width="400"
          title='搜索'
          placement="bottom-end"
          class="float-r"
        >
          <Button
            type="primary"
            size="large"
            icon="ios-search"
          >搜 索</Button>
          <div
            style="text-align:center"
            slot="content"
          >
            <Form
              ref="searchForm"
              :model="searchForm"
              :label-width="80"
              value=true
              style="min-width:200px;padding-top:20px;border-top:1px solid #a3adba;border-bottom:1px solid #a3adba;"
            >
              <Row>
                <Form-item label="SIM卡号">
                  <Input v-model="searchForm.sim"></Input>
                </Form-item>
                <Form-item label="位号编码">
                  <Input v-model="searchForm.installCode"></Input>
                </Form-item>
              </Row>
            </Form>
            <Row>
              <Button
                style="margin-left:5px;margin-top:10px;float:right;background-color: #5bc0de;color:#fff"
                size="small"
                @click="doSearchTableList"
              >确定</Button>
              <Button
                style="float:right;margin-top:10px;"
                size="small"
                @click="resetSearch"
              >重置</Button>
            </Row>
          </div>
        </Poptip>
      <Button
          @click="refreshData"
          type="success"
          class="float-r"
          style="margin-right:10px;"
          size="large"
          icon="md-refresh"
        >刷新
        </Button>
        </Col>
      </Row>
    </div>

    <!--table-->
    <Row>
      <Table
        ref="selectionTable"
        stripe
        size="small"
        :columns="tableColums"
        :data="tableData"
        :loading="tableLoading"
      ></Table>
    </Row>
    <Row>
      <Page
        :total="total"
        :current="currentPage"
        @on-change="changeCurrentPage"
        show-total
        style="float:right;margin-top:10px"
      ></Page>
    </Row>
  </div>

</template>

<script>
import { getRegisterList } from "@/api/device";
export default {
  data() {
    return {
      tableColums: [
        {
          type: "index",
          title: "序号",
          align: "center"
        },
        {
          align: "center",
          title: "SIM卡号",
          key: "sim"
        },
        {
          align: "center",
          title: "型号",
          key: "model"
        },
        {
          align: "center",
          title: "位号编码",
          key: "installCode"
        },
        {
          align: "center",
          title: "安装路段",
          key: "installRoad",
          minWidth: 90
        },
        {
          align: "center",
          title: "注册时间",
          key: "registerTime",
          minWidth: 90
        },
        {
          align: "center",
          title: "注册成功时间",
          key: "successTime",
          minWidth: 90
        }
      ],
      tableData: [],
      tableLoading: false,
      total: 0,
      currentPage: 1,
      pageSize: 10,
      btnLoading: false,
      searchForm: {
        sim: "",
        installCode: "",
        size: 10,
        current: 1
      }
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.getTableList();
  },
  methods: {
    resetSearch() {
      this.searchForm.imei = "";
      this.searchForm.devname = "";
    },
    doSearchTableList() {
      this.currentPage = 1;
      this.getTableList();
    },
    async getTableList() {
      this.tableLoading = true;
      let params = this.searchForm;
      params.current = this.currentPage;
      const result = await getRegisterList(params);
      if (result.code == 0) {
        let res = result.data;
        this.total = res.total;
        this.tableData = res.records;
      }
      this.tableLoading = false;
    },
    changeCurrentPage(num) {
      this.currentPage = num;
      this.getTableList();
    },
    refreshData(){
      this.resetSearch();
      this.getTableList();
    }
  }
};
</script>
